<template>
	<scroll-view scroll-y class="bgf5 recharge" :style="{height: 'calc(100vh)' }">
		<view class="bg6c pt14 mx15 mt10">
			<view class="aliC fs16">
				<view>可用余额</view>
				<view class="bold6 mt3"><text class="fs28">{{balance}}</text><text> 元</text></view>
			</view>
			<view class="flex flexC pt5 pb10 px28">
				<view class="flex1 flex flexC flexJC py6 aliC bg57 box r40" @click="chargeDetail">
					<text>查看使用明细</text>
					<image class="w12 ml6" src="/static/img/icon/right_nor.png" mode="widthFix"></image>
				</view>
				<view class="flex1 flex flexC flexJC py6 aliC bg57 box r40 ml25" @click="chargeShopList">
					<text>查看可用门店</text>
					<image class="w12 ml6" src="/static/img/icon/right_nor.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex flexC bg57 px16 py4 fs10">
				<image class="tip mr4" src="/static/img/icon/tip.png" mode="aspectFill"></image>
				<text>充值福利限时放送，充值赠送现金，还能享门店会员价哦！</text>
			</view>
		</view>
		<view class="bgff">
			<view class="bold6 c57 fs16 p15">
				<text class="fs12 mr2">●</text>
				<text>充值套餐</text>
			</view>
			<view class="flex flexC flexW px9">
				<view v-for="(item, index) in chargeList" :key="index"
					class="aliC r2 w33 bor57 py14 boxS mx6 mb12 flex flexCol flexC"
					:class="index == selectChargeIndex ? 'bg57' : ''" @click="selectCharge(item,index)">
					<view class="fs16 bold6">￥{{item.amount}}</view>
					<view class="fs12 mt8">到账{{item.get_amount}}</view>
				</view>
			</view>
		</view>
		<view class="bgf5 px15 pb30 fs12 c85">
			<view class="fs16 bold6 py12 c00">充值说明:</view>
			<view class="mb12">1、充值余额永久有效、不支持退款</view>
			<view class="mb12">2、充值余额可用于门店预约、订单续单</view>
			<view class="mb12">
				<text>3、充值余额仅限指定门店使用</text>
			</view>
			<view class="mb12">4、首次充值后可解锁会员价（根据不同门店情况定）</view>
			<!-- <view class="flex flexC bold6 mt20">
				<checkbox-group @change="onChangeAgreen">
					<label>
						<checkbox :checked="isAgreenContact" :value="1" style="transform: scale(.7);margin-left: -14rpx;"/>
						<text>我已阅读并同意</text>
					</label>
				</checkbox-group>
				<text class="c57">《小程序账户充值管理章程》</text>
			</view> -->

			<view class="bg57 r5 aliC py12 mt14" @click="doCharge">立即充值</view>

		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "account-charge",
		props: {
			statusBar: {
				type: Number,
				default: 20
			}
		},

		data() {
			return {
				chargeList: [],
				balance: 0,
				selectChargeIndex: 0,
				isAgreenContact: false,
				selectShop: null
			};
		},
		methods: {

			chargeShopList() {
				console.info("===chargeShopList====")
				uni.navigateTo({
					url: "/pages/discount/balanceShop?id=" + this.chargeList[this.selectChargeIndex].shop_id
				})
			},

			chargeDetail() {
				uni.navigateTo({
					url: "/pages/discount/chargeDetail"
				})
			},

			doCharge() {
				if (this.chargeList.length == 0) return;
				let param = {
					charge_id: this.chargeList[this.selectChargeIndex].id
				};
				let that = this;
				this.$api.charge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.wechatPay(res.data.payInfo)

					} else {

					}
				})
			},

			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						that.getCharge();
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},
			selectCharge(item, index) {
				this.selectChargeIndex = index;

				console.info("===selectChargeIndex====" + index);
			},
			getCharge(selectShop) {

				if (selectShop != null) {
					this.selectShop = selectShop;
				}
				let param = {
					shop_id: this.selectShop.id
				};
				let that = this;
				this.$api.getChargeInfo(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.balance = res.data.balance;
						that.chargeList = res.data.chargeList;

					} else {

					}
				})
			},
			onChangeAgreen(ev) {
				this.isAgreenContact = ev.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		.w12 {
			width: 14rpx;
			height: 14rpx;
		}

		.w4 {
			width: 10rpx;
			height: 10rpx;
		}

		.tip {
			width: 20rpx;
			height: 20rpx;
		}

		.bg6c {
			background: linear-gradient(to bottom,#FFB92B,#FBD056);
			border-radius: 12rpx 12rpx 0 0;
			color: #fff;

			.box {
				border: 2rpx solid #fff;
			}
		}

		.w33 {
			width: calc(33.33% - 28rpx);
			color: #000;

			&.bg57 {
				color: #fff;
			}
		}
	}
</style>